<template>
	<!-- 地址列表 -->
	<view class="addressListPages">
		<view v-for="(item,index) in addressList" :key="index" class="addressBox">
			<view class="addressList-box">
				<view>{{item.name}}</view>
				<view>{{item.phone}}</view>
			</view>
			<view class="phone-addressList">{{item.province}}{{item.city}}{{item.region}}{{item.streetAddress}}</view>
			<view class="addressList-box-second">
				<view class="addressList-selected">
					<view>
						<radio :checked="item.status===1" @tap="toggleRadio(item)"></radio>
					</view>
					<view :class="{ 'text-red':item.status}">默认收货地址</view>
				</view>
				<view class="addressList-box-icon">
					<uni-icons type='trash' @click="handleDelete(item.id)" color="#cdcccc" size="30"
						class="addressList-icons"></uni-icons>
					<span>|</span>
					<uni-icons type='compose' @click="handleEdit(item.id)" color="#cdcccc" class="addressList-icons"
						size="30"></uni-icons>
				</view>
			</view>
		</view>
		<view class="address_addBox" @click="toCreateAddress">
			<text class="addressBoxIcon"> + </text>
			<view>添加收货地址</view>

		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex"
	import request from '../../utils/request'
	export default {
		data() {
			return {
				addressList: [],
				status: false,
			};
		},
		onShow() {
			this.getAddressList()
		},
		methods: {
			toCreateAddress() {
				uni.navigateTo({
					url: '/subpkg/orderAddress/orderAddress'
				})
			},
			//删除
			handleDelete(id) {
				uni.showModal({
					title: '删除地址',
					content: '确定删除地址吗？',
					success: function(res) {
						if (res.confirm) {
							// 走接口
							request.post('/memberAddress/delete', {
								id
							}).then(res => {
								if (res.code === 0) {
									this.getAddressList()
								} else {
									uni.$showMsg(res.msg)
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}.bind(this) //可处理uni.shuowModal的异步（即拿不到data里面数据的解决办法）
				}); 
			},
			...mapMutations('m_order', ['saveAddressList']),
			handleEdit(id) {
				uni.navigateTo({
					url: '/subpkg/orderAddress/orderAddress?id=' + id
				})
			},

			getAddressList() {
				request.get('/memberAddress/getList').then(res => {
					if (res.code === 0) {
						this.saveAddressList(res.data)
						this.addressList = res.data  ;
					} else {
						uni.$showMsg(res.msg)
					}
				});
			},
			async toggleRadio(item) {
				this.addressList.forEach(item => {
					item.status = false
				});
				let editAddress = item
				editAddress.status = 1;
				request.post('/memberAddress/save', editAddress).then(res => {
					if (res.code === 0) {
						uni.$showMsg(res.msg)
						this.getAddressList()
						uni.navigateTo({
							url: '/subpkg/goods_order/goods_order'
						})
					} else {
						uni.$showMsg(res.msg)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .uni-radio-input.uni-radio-input-checked {
		/* 将背景颜色改为红色 */
		background-color: #ff5555 !important;
		/* 如果需要，也可以调整边框颜色为红色 */
		border-color: #ff5555 !important;
		/* 确保文字颜色与背景形成对比，可选 */
		color: #ffffff !important;
	}

	.address_addBox {
		width: 100%;
		height: 60rpx;
		background-color: royalblue;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;

		.addressBoxIcon {
			font-size: 32rpx;
			margin-right: 10rpx;
		}
	}

	.addressListPages {
		font-size: 30rpx;

		.addressBox {
			margin-bottom: 10rpx;

			.addressList-box {
				display: flex;
				justify-content: space-between;
				background-color: #fff;
				padding: 10rpx;

			}

			.phone-addressList {
				color: #5a5858;
				background-color: #fff;
				padding: 10rpx;
				border-bottom: 1rpx solid #eee;
			}

			.addressList-box-second {
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx;

				.addressList-selected {
					display: flex;
					justify-content: space-between;

					.text-red {
						color: #ff5555; // 当需要红色时应用此样式
					}
				}

				.addressList-box-icon {
					display: flex;
					color: #cdcccc;
					align-items: center;

					.addressList-icons {
						padding: 0px 20rpx;
					}
				}
			}
		}

	}
</style>